<script setup lang="ts">
import { inject } from 'vue';
import dialogTool from '../common/dialogTool';
import helpler from '../common/helpler';
const emits = defineEmits(['resized']);

interface Phantom {
    shadow: HTMLDivElement,
    source: HTMLDivElement,
    mask: HTMLDivElement,
    top: number,
}

const offsetTop = inject<number>("appOffsetTop") ?? 0;

var phantom: Phantom | null;
// var isLoaded = false;
const beginResize = (evt: MouseEvent) => {
    let mask = dialogTool.createDragMask();
    mask.style.zIndex = "9992";
    let element = evt.target as any;
    phantom = {
        shadow: document.createElement("div"),
        source: element,
        top: element.offsetTop,
        mask: mask,
    }
    phantom.shadow = document.createElement("div");
    phantom.shadow.style.position = "absolute";
    phantom.shadow.style.top = phantom.top + "px";
    phantom.shadow.style.height = element.offsetHeight + "px";
    phantom.shadow.style.width = element.offsetWidth + "px";
    phantom.shadow.style.backgroundColor = "#EFEFEF";
    element.parentNode.appendChild(phantom.shadow);
    document.body.appendChild(mask);
    // if (!isLoaded) {
    //     element.parentNode.parentNode.addEventListener("dragover", onDragOver);
    //     isLoaded = true;
    // }
    mask.addEventListener("selectstart", helpler.onSelectStart);
    mask.addEventListener("mousemove", onMouseMove);
    mask.addEventListener("mouseup", onMouseup);
}


const onMouseMove = (evt: Event) => {
    if (phantom == null) {
        return;
    }
    let mouseEvent: any = evt;
    let top = mouseEvent.clientY - offsetTop;
    if (top < 52) {
        phantom.shadow.style.top = "50px";
        phantom.top = 50;
    }
    else {
        phantom.top = top;
        phantom.shadow.style.top = phantom.top + "px";
    }
}

const onMouseup = () => {
    if (phantom == null) {
        return;
    }
    phantom.mask.removeEventListener("selectstart", helpler.onSelectStart);
    phantom.mask.removeEventListener("mousemove", onMouseMove);
    phantom.mask.removeEventListener("mouseup", onMouseup);
    // if (phantom.source.parentNode != null) {
    //     let parent: any = phantom.source.parentNode.parentNode;
    //     parent.style.width = (phantom.left + phantom.shadow.offsetWidth) + "px";
    // }
    try {
        emits('resized', phantom.top);
    }
    catch (err) {
        console.error(err);
    }
    phantom.mask.parentNode?.removeChild(phantom.mask);
    phantom.shadow.parentNode?.removeChild(phantom.shadow);
    phantom = null;
}

</script>
<template>
    <div style="height:5px;width:100%;background-color: var(--color-deep-2);cursor: pointer;" @mousedown="beginResize">
    </div>
</template>